<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取点阵</title>
</head>

<body>
    <script>
        function TextPointSet() {}
        TextPointSet.prototype.points = {}
        TextPointSet.prototype.canvas = document.createElement('canvas');
        TextPointSet.prototype.ctx = TextPointSet.prototype.canvas.getContext('2d');
        TextPointSet.prototype.get = function (text) {
            return this.points[text] || this._createTextPoint(text);
        }
        TextPointSet.prototype.getAll = function (text) {
            var that = this;
            return text.split('').map(function (item) {
                return that.get(item);
            })
        }
        TextPointSet.prototype._createTextPoint = function (text) {
            var canvas = this.canvas,
                ctx = this.ctx,
                size = 16;
            this.clearCanvas();
            canvas.width = canvas.height = size;
            ctx.font = size + "px SimSun";
            ctx.fillText(text, 0, 14);
            var canvasData = ctx.getImageData(0, 0, size, size).data,
                textPointSet = [];
            for (var i = 0; i < size; i++) {
                textPointSet.push(temp = []);
                for (var j = 0; j < size; j++) {
                    var index = i * size * 4 + j * 4;
                    var r = canvasData[index],
                        g = canvasData[index + 1],
                        b = canvasData[index + 2],
                        a = canvasData[index + 3];
                    temp.push(a ? 1 : 0);
                }
            }
            return this.points[text] = textPointSet;
        }

        TextPointSet.prototype.clearCanvas = function () {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
        }

        TextPointSet.prototype.getCanvas = function (points, options) {
            if (!options) {
                options = {
                    size: 100,
                    pointScale: .2
                }
            }
            var canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d'),
                length = points.length,
                oneTempLength = options.size / length;
            canvas.height = canvas.width = options.size;
            for (var i = 0; i < length; i++) {
                for (var j = 0; j < length; j++) {
                    if (points[i][j]) {
                        ctx.beginPath();
                        ctx.arc(oneTempLength * (j + .5), oneTempLength * (i + .5), oneTempLength * options
                            .pointScale, 0, Math.PI * 2)
                        ctx.fill()
                    }
                }
            }
            return canvas;
        }
        TextPointSet.prototype.getCanvasWithText = function (text, options) {
            return this.getCanvas(this.get(text, options))
        }
        var textTest = new TextPointSet();
        var textPoints = textTest.get('3');
        textTest
            .getAll('你是最美,他定 ')
            .map(item =>
                document.body.appendChild(textTest
                    .getCanvas(item, {
                        size: 70,
                        pointScale: .3
                    })
                )
            )
    </script>
</body>

</html>